<template>
<div class="homeContent">
    <van-tabs ref="tabs" v-model:active="active" sticky animated swipeable>
        <van-tab>
            <template #title>
                <!-- <van-icon name="more-o" /> -->
                <span>home</span>
            </template>
            <div class="firstTab">
                <div class="swipeBox">
                    <van-swipe class="swipe" :autoplay="1800" lazy-render indicator-color="#bca1f3" vertical style="width: 100%;height: 100%;" >
                        <van-swipe-item v-for="(item, index) in imagesList" :key="index">
                            <img style="width: 100%;height: 100%;object-fit: cover;" :src="item.img" />
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <div class="line"></div>
                <div class="advertisement">
                    {{ '广告位' }}
                </div>
                <div class="line"></div>
            </div>
        </van-tab>
        <van-tab>
            <template #title>
                <span>model</span>
            </template>
            <div class="secondTab">
                <div class="secondTabBox">
                    <Dice></Dice>
                </div>
            </div>
        </van-tab>
        <van-tab>
            <template #title>
                <!-- <van-icon name="more-o" /> -->
                <span>nothing</span>
            </template>
            <div class="thirdTab">
                <van-barrage v-model="scrollingList" :auto-play="true">
                    <div class="video" style="width: 100%; height: 200px"></div>
                </van-barrage>
            </div>
        </van-tab>
    </van-tabs>
    <!-- <div style="width: 100%;height: 200px;"></div> -->
</div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, onUnmounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { sourceHeader } from '@/utils/plugins'
import useSettingStore from '@/store/modules/setting'
const settings = useSettingStore()

const route = useRoute()
const router = useRouter()


const imagesList = ref([
    // {img:'http://101.200.90.7/image/IMG_7127.jpg'},
    // {img:'http://101.200.90.7/image/IMG_7128.jpg'},
    // {img:'https://www.paperfrogwei.com/image/IMG_7129.jpg'},
    // {img:'https://www.paperfrogwei.com/image/IMG_7177.jpg'},
    // {img:'https://www.paperfrogwei.com/image/IMG_7146.jpg'},
    {img: sourceHeader() + '/image/IMG_7127.jpg'},
    {img: sourceHeader() + '/image/IMG_7128.jpg'},
    {img: sourceHeader() + '/image/IMG_7129.jpg'},
    {img: sourceHeader() + '/image/IMG_7177.jpg'},
    {img: sourceHeader() + '/image/IMG_7146.jpg'},

])

const scrollingList = ref<any>([
    { id: 1, text: '这没东西' },
])

const interval = ref<any>(null)
// 模拟弹幕
const add = () => {
    interval.value = setInterval(() => {
        scrollingList.value.push({ id: Math.random(), text: '这没东西' });
    }, 400);
};

const active = ref<any>(1);
const homeDataList = ref([])
const tabs = ref<any>(null)

const scrollPosition = ref<number>(0);

const handleScroll = () => {
    scrollPosition.value = window.scrollY; // 获取垂直滚动位置或者使用 document.documentElement.scrollTop
    // if (window.scrollY == 0) { // 顶部滚动时隐藏头部，否则显示头部
    //     settings.handlerHeaderShow(true)
    // } else {
    //     settings.handlerHeaderShow(false)
    // }
}

// 监听滚动位置变化
watch(scrollPosition, (newVal) => {
    // console.log('新的滚动位置:', newVal);
    if (newVal == 0) { // 顶部滚动时隐藏头部，否则显示头部
        settings.handlerHeaderShow(true)
    } else {
        settings.handlerHeaderShow(false)
    }
});

onMounted(() => {
    window.addEventListener('scroll', handleScroll);
    nextTick(() => {
        const tabsWrapper = tabs.value.$el.querySelector('.van-tabs__nav');
        console.log('tabsWrapper',tabsWrapper )
        if (tabsWrapper) {
            tabsWrapper.style.backgroundColor = 'transparent'; // 设置tab透明
        }
    });
    add()
})

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
    if (interval.value) {
        clearInterval(interval.value);
        interval.value = null;
    }
    settings.handlerHeaderShow(true)
});

</script>


<style lang="scss" scoped>
.homeContent {
    width: 100%;
    min-height: 100%;
    height: auto;
    box-sizing: border-box;
    background-color: var(--background);
    color: var(--text-color);
    // overflow-y: auto;
    // padding: 15px;
    .firstTab {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        .swipeBox {
            width: 100%;
            // height: 200px;
            height: 70vh;
            overflow: hidden;
            .swipe {
                width: 100%;
                height: 100%;
            }
        }
        .line {
            width: 100%;
            height: 50px;
            background-color: #ccc;
        }
        .advertisement {
            width: 100%;
            height: 250px;
            background-color: rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .secondTab {
        width: 100%;
        height: auto;
        .secondTabBox {
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }
    }
    .thirdTab {
        width: 100%;
        height: auto;
    }
}
</style>